<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="polygon">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Geo Projections</title>
</head>

<body>
  <div class="toolbar" style="text-align: center;">
    <label for="projection">Select GEO Projection: </label>
    <select name="projection" id="projection">
      <option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>
      <option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>
      <option value="geoGnomonic">geoGnomonic</option>
      <option value="geoOrthographic">geoOrthographic</option>
      <option value="geoStereographic">geoStereographic</option>
      <!-- <option value="geoAlbersUsa">geoAlbersUsa</option> -->
      <option value="geoAlbers">geoAlbers</option>
      <option value="geoConicConformal">geoConicConformal</option>
      <option value="geoConicEqualArea">geoConicEqualArea</option>
      <option value="geoConicEquidistant">geoConicEquidistant</option>
      <option value="geoEquirectangular">geoEquirectangular</option>
      <option value="geoMercator">geoMercator</option>
      <option value="geoTransverseMercator">geoTransverseMercator</option>
      <option value="geoAiry">geoAiry</option>
      <option value="geoAitoff">geoAitoff</option>
      <option value="geoAlbers">geoAlbers</option>
      <option value="geoArmadillo">geoArmadillo</option>
      <option value="geoAugust">geoAugust</option>
      <option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>
      <option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>
      <option value="geoBaker">geoBaker</option>
      <option value="geoBerghaus">geoBerghaus</option>
      <option value="geoBoggs">geoBoggs</option>
      <option value="geoBonne">geoBonne</option>
      <option value="geoBottomley">geoBottomley</option>
      <option value="geoBromley">geoBromley</option>
      <option value="geoChamberlin">geoChamberlin</option>
      <option value="geoCollignon">geoCollignon</option>
      <option value="geoConicConformal">geoConicConformal</option>
      <option value="geoConicEqualArea">geoConicEqualArea</option>
      <option value="geoConicEquidistant">geoConicEquidistant</option>
      <option value="geoCraig">geoCraig</option>
      <option value="geoCraster">geoCraster</option>
      <option value="geoCylindricalEqualArea">geoCylindricalEqualArea</option>
      <option value="geoCylindricalStereographic">geoCylindricalStereographic</option>
      <option value="geoEckert1">geoEckert1</option>
      <option value="geoEckert2">geoEckert2</option>
      <option value="geoEckert3">geoEckert3</option>
      <option value="geoEckert4">geoEckert4</option>
      <option value="geoEckert5">geoEckert5</option>
      <option value="geoEckert6">geoEckert6</option>
      <option value="geoEisenlohr">geoEisenlohr</option>
      <option value="geoEquirectangular">geoEquirectangular</option>
      <option value="geoFahey">geoFahey</option>
      <option value="geoFoucaut">geoFoucaut</option>
      <option value="geoGilbert">geoGilbert</option>
      <option value="geoGingery">geoGingery</option>
      <option value="geoGinzburg4">geoGinzburg4</option>
      <option value="geoGinzburg5">geoGinzburg5</option>
      <option value="geoGinzburg6">geoGinzburg6</option>
      <option value="geoGinzburg8">geoGinzburg8</option>
      <option value="geoGinzburg9">geoGinzburg9</option>
      <option value="geoGnomonic">geoGnomonic</option>
      <option value="geoGringorten">geoGringorten</option>
      <option value="geoGuyou">geoGuyou</option>
      <option value="geoHammer">geoHammer</option>
      <option value="geoHammerRetroazimuthal">geoHammerRetroazimuthal</option>
      <option value="geoHealpix">geoHealpix</option>
      <option value="geoHill">geoHill</option>
      <option value="geoHomolosine">geoHomolosine</option>
      <option value="geoKavrayskiy7">geoKavrayskiy7</option>
      <option value="geoLagrange">geoLagrange</option>
      <option value="geoLarrivee">geoLarrivee</option>
      <option value="geoLaskowski">geoLaskowski</option>
      <option value="geoLittrow">geoLittrow</option>
      <option value="geoLoximuthal">geoLoximuthal</option>
      <option value="geoMercator">geoMercator</option>
      <option value="geoMiller">geoMiller</option>
      <option value="geoModifiedStereographic">geoModifiedStereographic</option>
      <option value="geoModifiedStereographicAlaska">geoModifiedStereographicAlaska</option>
      <option value="geoModifiedStereographicGs48">geoModifiedStereographicGs48</option>
      <option value="geoModifiedStereographicGs50">geoModifiedStereographicGs50</option>
      <option value="geoModifiedStereographicMiller">geoModifiedStereographicMiller</option>
      <option value="geoModifiedStereographicLee">geoModifiedStereographicLee</option>
      <option value="geoMollweide">geoMollweide</option>
      <option value="geoMtFlatPolarParabolic">geoMtFlatPolarParabolic</option>
      <option value="geoMtFlatPolarQuartic">geoMtFlatPolarQuartic</option>
      <option value="geoMtFlatPolarSinusoidal">geoMtFlatPolarSinusoidal</option>
      <option value="geoNaturalEarth">geoNaturalEarth</option>
      <option value="geoNaturalEarth2">geoNaturalEarth2</option>
      <option value="geoNellHammer">geoNellHammer</option>
      <option value="geoOrthographic">geoOrthographic</option>
      <option value="geoPatterson">geoPatterson</option>
      <option value="geoPolyconic">geoPolyconic</option>
      <option value="geoRectangularPolyconic">geoRectangularPolyconic</option>
      <option value="geoRobinson">geoRobinson</option>
      <option value="geoSatellite">geoSatellite</option>
      <option value="geoSinusoidal">geoSinusoidal</option>
      <option value="geoSinuMollweide">geoSinuMollweide</option>
      <option value="geoStereographic">geoStereographic</option>
      <option value="geoTimes">geoTimes</option>
      <option value="geoTransverseMercator">geoTransverseMercator</option>
      <option value="geoTwoPointAzimuthal">geoTwoPointAzimuthal</option>
      <!-- <option value="geoTwoPointAzimuthalUsa">geoTwoPointAzimuthalUsa</option> -->
      <option value="geoTwoPointEquidistant">geoTwoPointEquidistant</option>
      <!-- <option value="geoTwoPointEquidistantUsa">geoTwoPointEquidistantUsa</option> -->
      <option value="geoVanDerGrinten">geoVanDerGrinten</option>
      <option value="geoVanDerGrinten2">geoVanDerGrinten2</option>
      <option value="geoVanDerGrinten3">geoVanDerGrinten3</option>
      <option value="geoVanDerGrinten4">geoVanDerGrinten4</option>
      <option value="geoWagner4">geoWagner4</option>
      <option value="geoWagner6">geoWagner6</option>
      <option value="geoWagner7">geoWagner7</option>
      <option value="geoWiechel">geoWiechel</option>
      <option value="geoWinkel3">geoWinkel3</option>
      <option value="geoInterruptedHomolosine">geoInterruptedHomolosine</option>
      <option value="geoInterruptedSinusoidal">geoInterruptedSinusoidal</option>
      <option value="geoInterruptedBoggs">geoInterruptedBoggs</option>
      <option value="geoInterruptedSinuMollweide">geoInterruptedSinuMollweide</option>
      <option value="geoInterruptedMollweide">geoInterruptedMollweide</option>
      <option value="geoInterruptedMollweideHemispheres">geoInterruptedMollweideHemispheres</option>
      <option value="geoPolyhedral">geoPolyhedral</option>
      <option value="geoPolyhedralButterfly">geoPolyhedralButterfly</option>
      <option value="geoPolyhedralCollignon">geoPolyhedralCollignon</option>
      <option value="geoPolyhedralWaterman">geoPolyhedralWaterman</option>
      <option value="geoGringortenQuincuncial">geoGringortenQuincuncial</option>
      <option value="geoPeirceQuincuncial">geoPeirceQuincuncial</option>
    </select>
  </div>
  <div id="canvas"></div>
  <script src="./assets/lodash-4.17.4.min.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/data-set.min.js"></script>
  <script src="../build/g2.js"></script>
  <script>
    $.getJSON('./data/south-america.geo.json', data => {
      const $projection = $('#projection');

      const ds = new DataSet();
      ds.state.projection = $projection.val();
      const dv = ds.createView('back')
        .source(data, {
          type: 'GeoJSON'
        })
        .transform({
          type: 'geo.projection',
          projection: '$state.projection',
          as: [ 'x', 'y', 'centroidX', 'centroidY' ]
        });

      const data1 = [
        { name: 'Chile', value: 100 },
        { name: 'Colombia', value: 80 }
      ];

      const dv1 = ds.createView()
        .source(data1)
        .transform({
          geoDataView: 'back',
          field: 'name',
          type: 'geo.centroid',
          as: [ 'x', 'y' ]
        });

      const chart = new G2.Chart({
        container: 'canvas',
        forceFit: true,
        height: window.innerHeight,
        padding: 0
      });
      chart.scale({
        x: {
          sync: true
        },
        y: {
          sync: true
        }
      });

      chart.source(dv);
      chart.axis(false);
      chart.legend(false);
      chart.tooltip(false);
      chart.polygon()
        .position('x*y');
      const view = chart.view();
      view.source(dv1);
      view.point()
        .position('x*y');
      chart.render();

      $projection.on('change', () => {
        ds.setState('projection', $projection.val());
        setTimeout(() => {
          console.log(dv);
        }, 50);
      });

    });
  </script>
</body>

</html>
